<template>
    <view class="smart-page">
        <!--页面标题头begin-->
        <view class="smart-page-head">
            <view class="smart-page-head-title">video视频</view>
        </view>
        <!--页面标题头end-->
        <view>
            <video id="myVideo" src="../../static/video/shipin.mp4"
                danmu-btn="true" enable-danmu="true" :danmu-list="video_danmu_list"></video>
        </view>
        <view class="input_box">
            <input placeholder="评论内容..." v-model="inputValue">
        </view>
        <view class="btn_box">
            <button type="primary" @click="sendMsg">发送弹幕</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            inputValue: '', //输入框
            videoContext: '', //视频文字
            video_danmu_list: [{
                text: '你好',
                time: 1,
                color: '#abc342'
            },
            {
                text: '我很好，你好吗？',
                time: 2,
                color: '#ff5500'
            },
            {
                text: '我也很好！',
                time: 3,
                color: '#0000ff'
            }]
        }
    },
    onReady: function(){
        this.videoContext = uni.createVideoContext('myVideo');
    },
    methods: {
        /*发送弹幕*/
        sendMsg(){
            console.log('弹幕内容: ' + this.inputValue);
            this.videoContext.sendDanmu({
                text: this.inputValue,
                color: 'red'
            });
        }
    }
}
</script>
<style>
.input_box{background-color: #CCC9CA;}
.btn_box{margin-top: 20upx;}
</style>


